/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView,
  TouchableOpacity,
  Modal,
  Dimensions,
  Animated,
  Easing,
  NativeModules
} from 'react-native';

import Common from '../../../component/common';
import ScreenUtils from '../../../component/ScreenUtils';
import Loading from '../../../component/loading';

export default class tipModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
		rotation: new Animated.Value(0),
    };
    this.fetchData = this.fetchData.bind(this);
  }
  componentDidMount(){
    this.fetchData();
    this.startAnimate();
  }
  fetchData(){
	
  }
  
  startAnimate(){
    this.state.rotation.setValue(0);
    Animated.timing(this.state.rotation, {
      toValue: 1,
      duration: this.props.duration || 1000,
      easing: this.props.easing || Easing.linear
    }).start(()=>{this.startAnimate()}); 
  }
  
  _cancelShow() {
  	this.props.onChange(false);
  }
  _downloadNewVersion(){
	this.props.onChange(false);
  	NativeModules.JsAndroid.jsVersionqqdownloader(
	  (msg) => {
	    console.log("msg:"+msg);
	    
	  },
	  (x, y,) => {
		
	  }
	)
  }
  
  render() {
  	
    return (
	    	<Modal
				animationType={"fade"}
				transparent={true}
				visible={this.props.show}
				onRequestClose={() => {}}
			>
				<View style={styles.modalBackground}>
					<View style={styles.modalContent}>
						<View>
							{
								this.props.status == "loading" ?
								<Animated.Image
							        source={require('../../../images/loading_small.png')}
							        style={{
							        transform: [{
							            rotateZ: this.state.rotation.interpolate({
							            inputRange: [0,1],
							            outputRange: ['0deg', '360deg']
							       		})
							        }]
							    }}/> :null
							}
							{
								this.props.status == "success" ? <View style={styles.modalImage}><Image source = {require('../../../images/check_big.png')}/></View> : null
							}
						</View>
						<View style={styles.modalTextWrap}><Text style={styles.modalText}>{this.props.statusText}</Text></View>
						{
							this.props.status === "new" ? 
								<View>
									<TouchableOpacity onPress = {this._downloadNewVersion.bind(this)} style={styles.downNewVersionWrap}><Text style={styles.downNewVersion}>下载</Text></TouchableOpacity>
									<TouchableOpacity onPress = {this._cancelShow.bind(this)} style={styles.cancelModalWrap}><Text style={styles.modalText}>取消</Text></TouchableOpacity>
								</View> : null
						}
					</View>
				</View>
			</Modal>
    );
  }
}

const styles = StyleSheet.create({
	modalBackground:{
		backgroundColor:'rgba(0, 0, 0, 0.5)', 
		height:Dimensions.get('window').height,
		justifyContent:"center",
		alignItems:"center",
		margin:0,
		padding:0,
		position:"absolute",
		top:0,
		left:0,
		bottom:0,
		right:0,
		zIndex:99999,
	},
	modalContent:{
		width:ScreenUtils.scaleSize(320),
		height:ScreenUtils.scaleSize(190),
		backgroundColor:"#f6f6f6",
		alignItems:"center",
		justifyContent:"center",
		flexDirection:"column",
		borderRadius:5,
	},
	modalImage:{
		height:ScreenUtils.scaleSize(48),
	},
	modalTextWrap:{
		height:ScreenUtils.scaleSize(188)/3,
		justifyContent:"center",
		flexDirection:"column",
	},
	modalText:{
		color:"#000",
		fontSize:ScreenUtils.scaleSize(22),
		textAlign:"center",
	},
	downNewVersion:{
		color:"#066b75",
		fontSize:ScreenUtils.scaleSize(22),
		textAlign:"center",
	},
	downNewVersionWrap:{
		width:ScreenUtils.scaleSize(320),
		borderTopWidth:1,
		borderColor:"#d1d1d1",
		height:ScreenUtils.scaleSize(188)/3,
		justifyContent:"center",
		flexDirection:"column",
	},
	cancelModalWrap:{
		width:ScreenUtils.scaleSize(320),
		borderTopWidth:1,
		borderColor:"#d1d1d1",
		height:ScreenUtils.scaleSize(188)/3,
		justifyContent:"center",
		flexDirection:"column",
	}
});



